<template>
    <div>
        <el-breadcrumb separator=">">
            <el-breadcrumb-item :to="{ path: '/' }">{{$t('目录.仪表盘')}}</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/panel/rank2' }">{{$t('Temu数据分析')}}</el-breadcrumb-item>
            <el-breadcrumb-item >{{$t('查商品')}}</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="rank2-card">
            <div>
                <div class="rank2-card-title">{{$t('商品查询')}}</div>
                <el-divider></el-divider>
                <div v-if="isOpening == false">
                   <el-form :model="formData" label-width="10.58rem"  :inline="true" class="responsive-form">
                    <el-row :gutter="10">
                        <el-col :span="16">
                            <el-form-item :label="$t('关键词')">
                                <div style="display: flex;width: 100%;">
                                    <el-input v-model="formData.keyword" :placeholder="$t('请输入关键词')" style="width: 100%;" />
                                    <el-select v-model="formData.matchMode" style="width: 40%;">
                                        <el-option :label="$t('严格匹配')" :value="1" />
                                        <el-option :label="$t('模糊匹配')" :value="2" />
                                    </el-select>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item :label="$t('站点')">
                                <el-select v-model="formData.regionId" :placeholder="$t('请选择站点')" class="form-select">
                                    <el-option v-for="item in siteList" :key="item.regionId" :label="item.name" :value="item.regionId" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item :label="$t('品类')">
                                <el-cascader v-model="selectedValues" @change="handleChangeCate" @remove-tag="handleClearSelect"
                                :props="props" clearable :placeholder="$t('请选择品类')" collapse-tags collapse-tags-tooltip :max-collapse-tags="5" filterable style="width: 100%;" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item :label="$t('总销量')">
                                <div style="display: flex;width: 100%;">
                                    <el-input type="number" v-model="formData.soldMin" :placeholder="$t('最低')" class="form-input" />
                                    <el-input type="number" v-model="formData.soldMax" :placeholder="$t('最高')" class="form-input" />
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item :label="$t('日销量')">
                                <div style="display: flex;width: 100%;">
                                    <el-input type="number" v-model="formData.daySoldMin" :placeholder="$t('最低')" class="form-input" />
                                    <el-input type="number" v-model="formData.daySoldMax" :placeholder="$t('最高')" class="form-input" />
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item :label="$t('周销量')">
                                <div style="display: flex;width: 100%;">
                                    <el-input type="number" v-model="formData.weekSoldMin" :placeholder="$t('最低')" class="form-input" />
                                    <el-input type="number" v-model="formData.weekSoldMax" :placeholder="$t('最高')" class="form-input" />
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                        <el-form-item :label="$t('月销量')">
                            <div style="display: flex;width: 100%;">
                                <el-input type="number" v-model="formData.monthSoldMin" :placeholder="$t('最低')" class="form-input" />
                                <el-input type="number" v-model="formData.monthSoldMax" :placeholder="$t('最高')" class="form-input" />
                            </div>
                        </el-form-item>
                        </el-col>
                        <el-col :span="8">
                        <el-form-item :label="$t('日销增长率')">
                            <div style="display: flex;width: 100%;">
                                <el-input type="number" v-model="formData.daySoldRateMin" :placeholder="$t('最低')" class="form-input" />
                                <el-input type="number" v-model="formData.daySoldRateMax" :placeholder="$t('最高')" class="form-input" />
                            </div>
                        </el-form-item>
                        </el-col>
                    </el-row>
                   </el-form>
                </div>
                <div v-else>
                    <el-form :model="formData" label-width="10.58rem" :inline="true" class="responsive-form">
                        <el-row :gutter="10">
                            <el-col :span="16">
                                <el-form-item :label="$t('关键词')">
                                    <div style="display: flex;width: 100%;">
                                        <el-input v-model="formData.keyword" :placeholder="$t('请输入关键词')" style="width: 100%;" />
                                        <el-select v-model="formData.matchMode" style="width: 40%;">
                                            <el-option :label="$t('严格匹配')" :value="1" />
                                            <el-option :label="$t('模糊匹配')" :value="2" />
                                        </el-select>
                                    </div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item :label="$t('站点')">
                                    <el-select v-model="formData.regionId" :placeholder="$t('请选择站点')" class="form-select">
                                        <el-option v-for="item in siteList" :key="item.regionId" :label="item.name" :value="item.regionId" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item :label="$t('品类')">
                                    <el-cascader v-model="selectedValues" @change="handleChangeCate" @remove-tag="handleClearSelect"
                                    :props="props" clearable :placeholder="$t('请选择品类')" collapse-tags collapse-tags-tooltip :max-collapse-tags="5" filterable style="width: 100%;" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item :label="$t('总销量')">
                                    <div style="display: flex;width: 100%;">
                                        <el-input type="number" v-model="formData.soldMin" :placeholder="$t('最低')" class="form-input" />
                                        <el-input type="number" v-model="formData.soldMax" :placeholder="$t('最高')" class="form-input" />
                                    </div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item :label="$t('日销量')">
                                    <div style="display: flex;width: 100%;">
                                        <el-input type="number" v-model="formData.daySoldMin" :placeholder="$t('最低')" class="form-input" />
                                        <el-input type="number" v-model="formData.daySoldMax" :placeholder="$t('最高')" class="form-input" />
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item :label="$t('周销量')">
                                    <div style="display: flex;width: 100%;">
                                        <el-input type="number" v-model="formData.weekSoldMin" :placeholder="$t('最低')" class="form-input" />
                                        <el-input type="number" v-model="formData.weekSoldMax" :placeholder="$t('最高')" class="form-input" />
                                    </div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                            <el-form-item :label="$t('月销量')">
                                <div style="display: flex;width: 100%;">
                                    <el-input type="number" v-model="formData.monthSoldMin" :placeholder="$t('最低')" class="form-input" />
                                    <el-input type="number" v-model="formData.monthSoldMax" :placeholder="$t('最高')" class="form-input" />
                                </div>
                            </el-form-item>
                            </el-col>
                            <el-col :span="8">
                            <el-form-item :label="$t('日销增长率')">
                                <div style="display: flex;width: 100%;">
                                    <el-input type="number" v-model="formData.daySoldRateMin" :placeholder="$t('最低')" class="form-input" />
                                    <el-input type="number" v-model="formData.daySoldRateMax" :placeholder="$t('最高')" class="form-input" />
                                </div>
                            </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item :label="$t('周销增长率')">
                                    <div style="display: flex;width: 100%;">
                                        <el-input type="number" v-model="formData.weekSoldRateMin" :placeholder="$t('最低')" class="form-input" />
                                        <el-input type="number" v-model="formData.weekSoldRateMax" :placeholder="$t('最高')" class="form-input" />
                                    </div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                            <el-form-item :label="$t('月销增长率')">
                                <div style="display: flex;width: 100%;">
                                    <el-input type="number" v-model="formData.monthSoldRateMin" :placeholder="$t('最低')" class="form-input" />
                                    <el-input type="number" v-model="formData.monthSoldRateMin" :placeholder="$t('最高')" class="form-input" />
                                </div>
                            </el-form-item>
                            </el-col>
                            <el-col :span="8">
                            <el-form-item :label="$t('总销售额')">
                                <div style="display: flex;width: 100%;">
                                    <el-input type="number" v-model="formData.salesMin" :placeholder="$t('最低')" class="form-input" />
                                    <el-input type="number" v-model="formData.salesMax" :placeholder="$t('最高')" class="form-input" />
                                </div>
                            </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item :label="$t('日销售额')">
                                    <div style="display: flex;width: 100%;">
                                        <el-input type="number" v-model="formData.daySalesMin" :placeholder="$t('最低')" class="form-input" />
                                        <el-input type="number" v-model="formData.daySalesMin" :placeholder="$t('最高')" class="form-input" />
                                    </div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                            <el-form-item :label="$t('周销售额')">
                                <div style="display: flex;width: 100%;">
                                    <el-input type="number" v-model="formData.weekSalesMin" :placeholder="$t('最低')" class="form-input" />
                                    <el-input type="number" v-model="formData.weekSalesMax" :placeholder="$t('最高')" class="form-input" />
                                </div>
                            </el-form-item>
                            </el-col>
                            <el-col :span="8">
                            <el-form-item :label="$t('月销售额')">
                                <div style="display: flex;width: 100%;">
                                    <el-input type="number" v-model="formData.monthSalesMin" :placeholder="$t('最低')" class="form-input" />
                                    <el-input type="number" v-model="formData.monthSalesMax" :placeholder="$t('最高')" class="form-input" />
                                </div>
                            </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item :label="$t('库存')">
                                    <div style="display: flex;width: 100%;">
                                        <el-input type="number" v-model="formData.quantityMin" :placeholder="$t('最低')" class="form-input" />
                                        <el-input type="number" v-model="formData.quantityMax" :placeholder="$t('最高')" class="form-input" />
                                    </div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                            <el-form-item :label="$t('价格')">
                                <div style="display: flex;width: 100%;">
                                    <el-input type="number" v-model="formData.priceMin" :placeholder="$t('最低')" class="form-input" />
                                    <el-input type="number" v-model="formData.priceMax" :placeholder="$t('最高')" class="form-input" />
                                </div>
                            </el-form-item>
                            </el-col>
                            <el-col :span="8">
                            <el-form-item :label="$t('Temu.评分')">
                                <div style="display: flex;width: 100%;">
                                    <el-input type="number" v-model="formData.goodsScoreMin" :placeholder="$t('最低')" class="form-input" />
                                    <el-input type="number" v-model="formData.goodsScoreMax" :placeholder="$t('最高')" class="form-input" />
                                </div>
                            </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item :label="$t('评论数')">
                                    <div style="display: flex;width: 100%;">
                                        <el-input type="number" v-model="formData.reviewNumMin" :placeholder="$t('最低')" class="form-input" />
                                        <el-input type="number" v-model="formData.reviewNumMax" :placeholder="$t('最高')" class="form-input" />
                                    </div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                            <el-form-item :label="$t('上架时间')">
                                <div style="display: flex;width: 100%;">
                                    <el-date-picker v-model="onSaleTimeRange1" type="daterange" unlink-panels style="width: 100%;" :disabled-date="disabledDate"
                                    start-placeholder="Start Date" end-placeholder="End Date" @change="handleDateRangeChange" @visible-change="handleVisibleChange" @focus="handleFocus"/>
                                </div>
                            </el-form-item>
                            </el-col>
                            <el-col :span="8">
                            <el-form-item :label="$t('开店时间')">
                                <div style="display: flex;width: 100%;">
                                    <el-date-picker v-model="onSaleTimeRange2" type="daterange" unlink-panels style="width: 100%;" :disabled-date="disabledDate"
                                    start-placeholder="Start Date" end-placeholder="End Date" @change="handleDateRangeChange2" @visible-change="handleVisibleChange" @focus="handleFocus"/>
                                </div>
                            </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item :label="$t('商品状态')">
                                    <el-select v-model="formData.status" :placeholder="$t('请选择站点')" class="form-select">
                                        <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"/>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8"></el-col>
                            <el-col :span="8"></el-col>
                        </el-row>
                   </el-form>
                </div>
                <div v-if="isOpening == false" style="display: flex;width: 100%;justify-content: space-between;">
                    <el-button style="margin: 1rem 1rem 0 3%;color:rgb(0,82,217);display: flex;border: none;" @click="isOpen()">
                        <el-icon><ArrowDown /></el-icon>
                        <div style="margin: -0.3rem 0 0 0.5rem;">{{ $t('展开') }}</div>
                    </el-button>
                    <div style="display: flex;">
                        <el-button style="margin: 1rem 0 0 0;background-color:rgb(0,82,217);color: #fff;display: flex;
                        height: 2.5rem;width: 6.25rem;" @click="searchProducts">
                        <el-icon><Search /></el-icon>
                        <div style="margin: -0.1rem 0 0 0.2rem;font-size:0.9rem">{{ $t('Temu.搜索') }}</div>
                        </el-button>
                        <el-button style="margin: 1rem 0 0 2rem;background-color:#E8E9ED;color: #101010;height: 2.5rem;
                        width: 6.25rem;" @click="clearForm">
                            <div style="margin: -0.1rem 0 0 0.2rem;font-size:0.9rem">{{ $t('清除') }}</div>
                        </el-button>
                    </div>
                </div>
                <div v-else style="display: flex;width: 100%;justify-content: space-between;">
                    <el-button style="margin: 1rem 1rem 0 3%;color:rgb(0,82,217);display: flex;border: none;" @click="isOpen()">
                        <el-icon><ArrowUp /></el-icon>
                        <div style="margin: -0.1rem 0 0 0.5rem;">{{ $t('收起') }}</div>
                    </el-button>
                    <div style="display: flex;">
                        <el-button style="margin: 1rem 0 0 0;background-color:rgb(0,82,217);color: #fff;display: flex;
                        height: 2.5rem;width: 6.25rem;" @click="searchProducts">
                        <el-icon><Search /></el-icon>
                        <div style="margin: -0.1rem 0 0 0.2rem;font-size:0.9rem">{{ $t('Temu.搜索') }}</div>
                        </el-button>
                        <el-button style="margin: 1rem 0 0 2rem;background-color:#E8E9ED;color: #101010;height: 2.5rem;
                        width: 6.25rem;" @click="clearForm">
                            <div style="margin: -0.1rem 0 0 0.2rem;font-size:0.9rem">{{ $t('清除') }}</div>
                        </el-button>
                    </div>
                </div>
                <el-divider></el-divider>
            </div>
            <div>
                <div class="rank2-card-title">
                    {{$t('搜索结果')}}
                    <span style="color:#999;font-size: 0.8rem">({{ total }}{{ $t('共') }})</span>
                </div>
                <!--加载中 -->
                <div v-if="!isSuccess" v-loading="true" element-loading-text="Loading..." element-loading-background="rgba(200, 200, 200, 0.8)" 
                    style="width: 8rem;height: 7rem;position: absolute;left: 50%;top: 50%;border-radius: 0.5rem;"></div>
                <div v-else-if="isSuccess && isVip" style="margin-top: 1.3rem;">
                    <el-table :data="tableData" style="width: 100%" size="small" :header-cell-style="{background:'#f2f3f8',color:'#101010',height:'40px','text-align':'center'}"
                    :cell-style="{'text-align':'center'}" :row-style="{height:'70px'}" @sort-change="handleSortChange" :header-cell-class-name="getHeaderCellClassName"
                     :default-sort="{ prop: this.formData.sort, order: this.formData.order+'ing' }" height="800">
                        <el-table-column prop="products" :label="this.$t('表格.商品')" width="380" fixed>
                            <template #default="scope">
                                <div style="display: flex;">
                                    <div style="cursor: pointer;">
                                        <img :src="scope.row.thumbnail" style="width: 5rem;height: 5rem;"/>
                                    </div>
                                    <div  class="goodsName" @click="shiftDetailTemu(scope.row.goodsId,this.formData.regionId)">
                                        <!-- <span class="product-tag" >{{scope.row.catItems[3].catName}}</span> -->
                                        <span class="showOverTooltip" style="font-size: 14px">{{ scope.row.goodsNameEn }}</span>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column prop="trend" label="趋势" >
                         <template #default="scope">
                                <div :id="'echarts_' + scope.row.goodsId" style="width: 6.25rem;height: 2.5rem;"></div>
                         </template>
                        </el-table-column> -->
                        <el-table-column prop="minPrice" :label="this.$t('价格')" sortable="custom" width="140">
                            <template #default="scope">
                                <div style="color: #ff5c00;font-size: 14px">
                                    <div v-if="scope.row.minPrice == null || scope.row.minPrice == ''">
                                        <span>{{symbol}}{{ scope.row.maxPrice }}</span>
                                    </div>
                                    <div v-else-if="scope.row.maxPrice == null || scope.row.maxPrice == ''">
                                        <span>{{symbol}}{{ scope.row.minPrice }}</span>
                                    </div>
                                    <div v-else>
                                        <span>{{symbol}}{{ scope.row.minPrice }} - {{symbol}}{{ scope.row.maxPrice }}</span>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column :label="this.$t('表格.销量')">
                            <el-table-column prop="sold" :label="this.$t('表格.总')" sortable="custom" width="130">
                                <template #default="scope">
                                  <div v-if="scope.row.sold == '' || scope.row.sold == null"> - </div>
                                  <div v-else style="font-size: 14px">
                                    {{ parseInt(scope.row.sold)}}
                                  </div>
                                    <!-- <div v-if="scope.row.sold >=1000000 && scope.row.sales < 10000000">
                                        {{ String(scope.row.sales).slice(0,3)}}万
                                    </div>
                                    <div v-else-if="scope.row.sold >=100000 && scope.row.sales < 1000000">
                                        {{ String(scope.row.sales).slice(0,2)}}万
                                    </div>
                                    <div v-else-if="scope.row.sold >=10000">
                                        {{ String(scope.row.sold).slice(0,1)}}万
                                    </div>
                                    <div v-else>
                                        {{scope.row.sold}}
                                    </div> -->
                                </template>
                            </el-table-column>
                            <el-table-column prop="daySold" :label="this.$t('表格.日')" sortable="custom" width="120">
                                <template #default="scope">
                                  <div v-if="scope.row.daySoldRate == null || scope.row.daySoldRate == ''">
                                    <TableCell :data="scope.row.daySold" :rate="0"></TableCell>
                                    0.0%
                                  </div>
                                  <div v-else>
                                    <TableCell :data="scope.row.daySold" :rate="scope.row.daySoldRate"></TableCell>
                                  </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="weekSold" :label="this.$t('表格.周')" sortable="custom" width="120">
                                <template #default="scope">
                                  <div v-if="scope.row.weekSoldRate == null || scope.row.weekSoldRate == ''">
                                    <TableCell :data="scope.row.weekSold" :rate="0"></TableCell>
                                    0.0%
                                  </div>
                                  <div v-else>
                                    <TableCell :data="scope.row.weekSold" :rate="scope.row.weekSoldRate"></TableCell>
                                  </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="monthSold" :label="this.$t('表格.月')" sortable="custom" width="120">
                                <template #default="scope">
                                  <div v-if="scope.row.monthSoldRate == null || scope.row.monthSoldRate == ''">
                                    <TableCell :data="scope.row.monthSold" :rate="0"></TableCell>
                                    0.0%
                                  </div>
                                  <div v-else>
                                    <TableCell :data="scope.row.monthSold" :rate="scope.row.monthSoldRate"></TableCell>
                                  </div>
                                </template>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column :label="this.$t('表格.销售额')">
                            <el-table-column :label="this.$t('表格.总')" prop="sales" sortable="custom" width="130">
                                <template #default="scope">
                                  <div v-if="scope.row.sales == '' || scope.row.sales == null"> - </div>
                                  <div v-else style="font-size: 14px">
                                    {{ parseInt(scope.row.sales)}}
                                  </div>
                                    <!-- <div v-if="scope.row.sales >=1000000 && scope.row.sales < 10000000">
                                        {{ String(scope.row.sales).slice(0,3)}}万
                                    </div>
                                    <div v-else-if="scope.row.sales >=100000 && scope.row.sales < 1000000">
                                        {{ String(scope.row.sales).slice(0,2)}}万
                                    </div>
                                    <div v-else-if="scope.row.sales >=10000 && scope.row.sales < 100000">
                                        {{ String(scope.row.sales).slice(0,1)}}万
                                    </div>
                                    <div v-else>
                                        {{scope.row.sales}}
                                    </div> -->
                                </template>
                            </el-table-column>
                            <el-table-column prop="daySales" :label="this.$t('表格.日')" sortable="custom" width="120">
                                <template #default="scope">
                                  <div v-if="scope.row.daySalesRate == null || scope.row.daySalesRate == ''">
                                    <TableCell :data="scope.row.daySales" :rate="0"></TableCell>
                                    0.0%
                                  </div>
                                  <div v-else>
                                    <TableCell :data="scope.row.daySales" :rate="scope.row.daySalesRate"></TableCell>
                                  </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="weekSales" :label="this.$t('表格.周')" sortable="custom" width="120">
                                <template #default="scope">
                                  <div v-if="scope.row.weekSalesRate == null || scope.row.weekSalesRate == ''">
                                    <TableCell :data="scope.row.weekSales" :rate="0"></TableCell>
                                    0.0%
                                  </div>
                                  <div v-else>
                                    <TableCell :data="scope.row.weekSales" :rate="scope.row.weekSalesRate"></TableCell>
                                  </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="monthSales" :label="this.$t('表格.月')" sortable="custom" width="120">
                                <template #default="scope">
                                  <div v-if="scope.row.monthSalesRate == null || scope.row.monthSalesRate == ''">
                                    <TableCell :data="scope.row.monthSales" :rate="0"></TableCell>
                                    0.0%
                                  </div>
                                  <div v-else>
                                    <TableCell :data="scope.row.monthSales??''" :rate="scope.row.monthSalesRate"></TableCell>
                                  </div>
                                </template>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column prop="onSaleTime" :label="this.$t('表格.上架时间')" sortable="custom" width="120">
                            <template #default="scope">
                              <div v-if="scope.row.onSaleTime == '' || scope.row.onSaleTime == null"> - </div>
                              <div v-else style="font-size: 14px">{{ parseDateTime(scope.row.onSaleTime??'-') }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="mallOpenTime" :label="this.$t('表格.开店时间')" sortable="custom" width="130">
                            <template #default="scope">
                              <div v-if="scope.row.mallOpenTime == '' || scope.row.mallOpenTime == null"> - </div>
                              <div v-else style="font-size: 14px">{{ parseDateTime(scope.row.mallOpenTime) }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="quantity" :label="this.$t('表格.库存')" sortable="custom" width="110">
                          <template #default="scope">
                            <div v-if="scope.row.quantity == '' || scope.row.quantity == null"> - </div>
                            <div v-else style="font-size: 14px">
                              {{ parseInt(scope.row.quantity)}}
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column prop="goodsScore" :label="this.$t('表格.商品评分')" sortable="custom">
                          <template #default="scope">
                            <div v-if="scope.row.goodsScore == '' || scope.row.goodsScore == null"> - </div>
                            <div v-else style="font-size: 14px">
                              {{ scope.row.goodsScore}}
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column prop="reviewNum" :label="this.$t('表格.评论数')" sortable="custom" width="130">
                          <template #default="scope">
                            <div v-if="scope.row.reviewNum == '' || scope.row.reviewNum == null"> - </div>
                            <div v-else style="font-size: 14px">
                              {{ parseInt(scope.row.reviewNum)}}
                            </div>
                          </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 不是vip时显示 -->
                <div v-show="isSuccess && !isVip">
                    <div class="can-not-show" style="width: 72.5rem;">{{ $t('没开vip') }}</div>
                    <div style="margin-top: 1rem;margin-left: 33rem;margin-bottom: 3rem">
                        <el-button style="background-color:#165DFF;color:#fff;height: 2.5rem;" @click="shiftReserve()">{{ $t('没开vip.按钮') }}</el-button>
                    </div>
                </div>
            </div>
            <div v-show="isSuccess && isVip" style="margin: 1rem 2rem 1rem 50%;">
                    <el-pagination v-model:current-page="formData.page" v-model:page-size="formData.size" :page-sizes="[10,20, 50, 100]"
                    :size="size" :disabled="disabled" :background="background" layout="sizes, prev, pager, next, jumper"
                    :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" hide-on-single-page/>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import TableCell from '../components/TableCell.vue'; // 引入 
import {getSites,getCates,searchGoods} from '../apis/gb'
import { ElMessage } from 'element-plus';
    // let mapIsLeaf = {};
    export default{
        name: 'MyComponent',
        components: {
            TableCell // 注册
        },
        data(){
            return{
                isSuccess:false,
                isVip:false,
                // mapIsLeaf:{},
                parentCatId:0,
                // cateList:[],
                selectedValues:[],  // 用于存储选中的值
              // eslint-disable-next-line no-unused-vars
                props:{
                  multiple: true ,
                  lazy:true,
                  checkStrictly: true,
                  async lazyLoad(node, resolve) {
                    // console.log(node)
                    const {value} = node;
                    getCates(value).then((res)=>{
                      //ES新特征 深拷贝
                      const formattedData = res.data.lists.map(item => {
                        const newItem = {
                          value: item.catId,
                          label: item.catNameEn,
                          children: item.isLeaf ? [] : undefined, // 如果 isLeaf 为 false，则允许有子节点
                          leaf: item.isLeaf,
                        };
                        // mapIsLeaf['id_'+item.catId] = item.isLeaf;
                        return newItem;
                      });
                      resolve(formattedData);
                    })
                  }},
                siteList:[],
                statusList:[
                    {
                        value:0,
                        label: this.$t('不限'),
                    },
                    {
                        value:1,
                        label: this.$t('正常'),
                    },
                    {
                        value:2,
                        label: this.$t('缺货'),
                    },
                    {
                        value:3,
                        label: this.$t('下架'),
                    },
                ],
                onSaleTimeRange1: [],
                onSaleTimeRange2: [],
                formData:{
                    keyword:null,
                    // 商品标题匹配模式
                    // 1=严格匹配 2=模糊匹配，默认为2（模糊匹配）
                    matchMode:2,
                    // 匹配站点，默认为211（美国）
                    regionId:211,
                    // siteId: 49,
                    // 匹配品类ID，多个用逗号隔开
                    catIds: null,
                    soldMin: null,
                    soldMax:null,
                    daySoldMin:1,
                    daySoldMax:null,
                    weekSoldMin:null,
                    weekSoldMax:null,
                    monthSoldMin:null,
                    monthSoldMax:null,
                    daySoldRateMin:null,
                    daySoldRateMax:null,
                    weekSoldRatelin:null,
                    weekSoldRateMax:null,
                    monthSoldRateMin:null,
                    monthSoldRateMax:null,
                    salesMin:null,
                    salesMax:null,
                    daySalesMin:null,
                    weekSalesMin:null,
                    weekSalesMax:null,
                    monthSalesMin:null,
                    monthSalesMax:null,
                    quantityMin:null,
                    quantityMax:null,
                    mallSoldMin:null,
                    mallSoldMax:null,
                    priceMin:null,
                    priceMax:null,
                    goodsScoreMin:null,
                    goodsScoreMax:null,
                    reviewNumMin:null,
                    reviewNumMax:null,
                    onSaleTimeMin:null,
                    onSaleTimeMax:null,
                    malOpenTimeMin:null,
                    mallOpenTimeMax:null,
                    // 商品状态1=正常 2=缺货 3=下架 0不限
                    status:1,
                    sort: "sold",
                    order: "descend",
                    // showPreference: 2,
                    page: 1,
                    size: 10,
                },
                templateFormData:{
                    keyword:null,
                    // 商品标题匹配模式
                    // 1=严格匹配 2=模糊匹配，默认为2（模糊匹配）
                    matchMode:2,
                    // 匹配站点，默认为211（美国）
                    regionId:211,
                    // siteId: 49,
                    // 匹配品类ID，多个用逗号隔开
                    catIds: [],
                    soldMin: null,
                    soldMax:null,
                    daySoldMin:null,
                    daySoldMax:null,
                    weekSoldMin:null,
                    weekSoldMax:null,
                    monthSoldMin:null,
                    monthSoldMax:null,
                    daySoldRateMin:null,
                    daySoldRateMax:null,
                    weekSoldRatelin:null,
                    weekSoldRateMax:null,
                    monthSoldRateMin:null,
                    monthSoldRateMax:null,
                    salesMin:null,
                    salesMax:null,
                    daySalesMin:null,
                    weekSalesMin:null,
                    weekSalesMax:null,
                    monthSalesMin:null,
                    monthSalesMax:null,
                    quantityMin:null,
                    quantityMax:null,
                    mallSoldMin:null,
                    mallSoldMax:null,
                    priceMin:null,
                    priceMax:null,
                    goodsScoreMin:null,
                    goodsScoreMax:null,
                    reviewNumMin:null,
                    reviewNumMax:null,
                    onSaleTimeMin:null,
                    onSaleTimeMax:null,
                    malOpenTimeMin:null,
                    mallOpenTimeMax:null,
                    // 商品状态1=正常 2=缺货 3=下架 0不限
                    status:1,
                    sort: "sold",
                    order: "descend",
                    // showPreference: 2,
                    page: 1,
                    size: 10,
                },
                isOpening:false,
                total:null,
                currentPage:1,
                pageSize:10,
                size:'default',
                background:true,
                disabled:false,
                myChart:null,
                tableData:[],
                sortBy: '',
                sortOrders: {},
                defaultTime:[],
                symbol:'$',
                retry:3,
            }
        },
        mounted(){
            // const additionalData = this.$route.meta.gtmAdditionalEventData || {};
            this.$gtm.trackView({ page: this.$route.path,gtm: this.$route.meta.gtm });
            this.getSiteList()
            // this.getCateList()
            
            setTimeout(()=>{
                this.drawLineChart()//宏任务
            },0);

          let a = JSON.parse(localStorage.getItem('myinfo'))
            if(a.is_active!==false){
                this.isVip = true
            }
            this.getOneMonthAgo()
            this.searchProducts()
        },
        created() {
            // this.$gtm.trackView({ page: this.$route.path,gtm: this.$route.meta.gtm });
        },
      methods:{
            getSiteList(){
                getSites().then((res)=>{
                    // 成功
                    if(res.code == 200 && res.status == 1){
                        this.siteList = this.siteList.concat(res.data.lists)
                    }
                })
            },
            // getCateList(node,resolve){
            //     getCates(this.parentCatId).then((res)=>{
            //         if(res.code == 200 && res.status == 1){
            //             const formattedData = res.data.lists.map(item => {
            //                 const newItem = {
            //                     value: item.catId,
            //                     label: item.catNameEn,
            //                     children: item.isLeaf ? [] : undefined, // 如果 isLeaf 为 false，则允许有子节点
            //                     leaf: item.isLeaf,
            //                 };
            //                 return newItem;
            //             });
            //
            //             this.cateList = formattedData
            //             resolve(formattedData)
            //             console.log(this.cateList)
            //         }else {
            //             // 处理非成功的响应
            //             console.warn('获取分类列表失败:', res);
            //         }
            //     }).catch((error) => {
            //         // 处理请求错误
            //         console.error('请求分类列表时发生错误:', error);
            //     });
            // },
            // handleChangeCate(value){
            //     console.log('Selected:', value);
            //     // 当用户选择时，获取最后一级的分类 ID 并加载其子节点
            //     if (value.length > 0) {
            //         this.formData.catIds = value
            //         const a =value[value.length - 1]
            //         console.log(a)
            //         this.parentCatId = a[0];
            //         this.getCateList();
            //     } else {
            //         // 如果没有选择，则重置父分类 ID
            //         this.parentCatId = null;
            //     }
            // },
            // handleExpandChange(value){
            //     console.log('Selected11111:', value);
            // },
            searchProducts(){
                for(let key in this.formData){
                    if(this.formData[key] == ""){
                        this.formData[key] =null
                    }
                }

                  this.formData.catIds= null
                if(this.selectedValues.length > 0){
                    this.formData.catIds= ''
                  this.selectedValues.forEach((item,index)=>{
                    let last = item[item.length-1];
                    if(index === this.selectedValues.length-1){
                      this.formData.catIds = this.formData.catIds + last ;
                    }else{
                      this.formData.catIds = this.formData.catIds + last + ','
                    }
                  })
                }
                this.isSuccess = false
                searchGoods(this.formData).then((res)=>{
                    if(res.code == 200 && res.status == 1){
                        this.reTry = 3
                        this.total = res.data.lists.total
                        this.tableData = []
                        this.tableData = res.data.lists.list
                        this.isSuccess=true
                        this.siteList.forEach((item,index)=>{
                            if(item.regionId === this.formData.regionId){
                                this.symbol = this.siteList[index].symbol
                                localStorage.setItem("symbol",this.symbol)
                            }
                        })
                        console.log(this.symbol)
                    }
                }).catch((error)=>{
                    console.log(this.$t('响应search数据失败'), error);
                    setTimeout(()=>{
                        if(this.reTry > 0){
                            this.reTry--;
                            this.getGoodsDetail();
                        }else if(this.reTry == 0){
                            this.isSuccess = true
                                ElMessage({
                                message:this.$t('响应search数据失败'),
                                grouping:true,
                                type:'error'
                            })
                        }
                    },1000)
                })
            },
            clearForm(){
                this.formData = this.templateFormData
            },
            handleClearSelect(){
                this.selectedValues = []
            },
            drawLineChart(){
              const that =this;
              this.tableData.forEach(item=>{
                console.log(document.getElementById('echarts_' + item.goodsId));
                if(document.getElementById('echarts_' + item.goodsId) ===null){
                  return;
                }
                that.myChart = echarts.init(document.getElementById('echarts_' + item.goodsId));
                that.myChart.setOption({
                  xAxis: {
                    show: false, //取消显示坐标轴,坐标轴刻度,坐标值(如果是y轴,默认的网格线也会取消显示)
                    type: 'category',
                    boundaryGap: false,
                    splitLine: {
                      show:false
                    },
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                  },
                  yAxis: {
                    type: 'value',
                    axisLabel: { // 取消显示坐标值
                      show: false
                    },
                    splitLine: { //取消网格线
                      show:false
                    },
                  },
                  series: [
                    {
                      data: [820, 932, 901, 934, 1290, 1330, 1320],
                      type: 'line',
                      symbol: "none",
                      smooth: true,
                      areaStyle: {}
                    }
                  ],
                  grid: {
                    left: "0",
                    top: "0",
                    right: "0",
                    bottom: "0",
                    containLabel: true,
                  },
                });
              })

            },
            parseDateTime(dateTimeStr) {
                // const date = new Date(dateTimeStr);
                if(dateTimeStr == null || dateTimeStr == '' ||dateTimeStr =='-')
                {
                    return dateTimeStr;
                }
                const date = dateTimeStr.slice(0,10)
                return date
                // const now = new Date();
                // const diff = now - date;   
                // const seconds = Math.floor(diff / 1000);
                // const minutes = Math.floor(seconds / 60);
                // const hours = Math.floor(minutes / 60); 
                // const days = Math.floor(hours / 24);
                // const months = Math.floor(days / 30);
                // const years = Math.floor(days / 365);
                // if (years > 0) {
                //     return `${years}年前`;
                // } else if (months > 0) {
                //     return `${months}月前`;
                // } else if (days > 0) {
                //     return `${days}天前`;
                // }
            },
            handleDateRangeChange(value){
                // value 是一个数组，包含两个 Date 对象：[start, end]
                if (Array.isArray(value) && value.length === 2) {
                    this.formData.onSaleTimeMin = value[0]; // 开始日期
                    this.formData.onSaleTimeMax = value[1]; // 结束日期
                }
                console.log(this.formData.onSaleTimeMin)
            },
            handleDateRangeChange2(value){
                // value 是一个数组，包含两个 Date 对象：[start, end]
                if (Array.isArray(value) && value.length === 2) {
                    this.formData.mallOpenTimeMin = value[0]; // 开始日期
                    this.formData.mallOpenTimeMax = value[1]; // 结束日期
                }
            },
            isOpen(){
                if(this.isOpening == false){
                    this.isOpening = true
                }else{
                    this.isOpening = false
                }
            },
            handleSizeChange(number){
                this.formData.size = number
                this.isSuccess = false
                this.searchProducts()
            },
            handleCurrentChange(number){
                this.formData.page = number
                this.isSuccess = false
                this.searchProducts()
            },
            handleSortChange({ column, prop, order }){
                console.log(111111111,column)
                console.log(222222222,prop)
                console.log(333333333,order)
                if (!prop) {
                    // 如果 prop 为空，可以选择忽略排序或给出提示
                    console.warn('prop,error');
                    return;
                }
                this.formData.sort = prop;
                if(order == 'ascending'){
                    this.formData.order = 'ascend';
                }else if(order == 'descending')
                {
                    this.formData.order = 'descend';
                }
                this.isSuccess = false
                this.searchProducts()
            } ,
            shiftDetailTemu(goodsId,regionId){
                // 跳转新标签页
                const routeData = this.$router.resolve({
                        name: 'detail3',
                        query:{
                            goodsId:goodsId,
                            regionId:regionId,
                            returnUrl: window.location.href // 记录当前页面的 URL
                        }
                    });
                window.open(routeData.href, '_blank');
            },
            getOneMonthAgo() {
                const now = new Date();
                const oneMonthAgo = new Date(now);
                this.formData.mallOpenTimeMax = oneMonthAgo.toISOString()
                this.templateFormData.mallOpenTimeMax = oneMonthAgo.toISOString()
                // 减去一个月的毫秒数
                oneMonthAgo.setMonth(now.getMonth() - 1);
                // 处理日期可能的变化（例如从31号到没有31号的月份）
                if (oneMonthAgo.getDate() !== now.getDate()) {
                    oneMonthAgo.setDate(0); // 设置为上个月的最后一天
                }
                console.log(44444,this.formData.onSaleTimeMax)
                this.formData.mallOpenTimeMin = oneMonthAgo.toISOString()
                this.templateFormData.mallOpenTimeMin = oneMonthAgo.toISOString()
                this.defaultTime= [oneMonthAgo,now]
                // return oneMonthAgo.toISOString();
            },
            // 设置不可选的时间
            disabledDate(time){
                if (!(time instanceof Date)) {
                    time = new Date(time);
                }
                return time.getTime() > Date.now();
            },
            updateDisabledDateRange(){
                this.$forceUpdate(); // 强制更新组件，确保 disabledDate 重新计算
            },
            handleFocus(){
                this.disabledDate()
            },
            handleVisibleChange(visible){
                if (visible) {
                    this.updateDisabledDateRange();
                } else {
                    console.log('unvisible');
                }
            },
            getHeaderCellClassName({ column, columnIndex }) {
                console.log(columnIndex)
                if (this.formData.sort == column.property) {
                    return 'sorted-header';
                }
                return '';
            },
    }
}
</script>

<style lang="scss" scoped>
.rank2-card{
    margin: 1rem 0 0 0;
    padding: 1rem;
    box-sizing: border-box;
    width: 100%;
    min-height: 44.38rem;
    border-radius: 0.31rem;
    background-color: rgba(255, 255, 255, 1);
    .rank2-card-title{
        width: 19.38rem;
        height: 1.88rem;
        line-height: 1.88rem;
        color: rgba(16, 16, 16, 1);
        font-size: 1.25rem;
        font-weight: 600;
        text-align: left;
        font-family: AlibabaPuHui-medium;
    }
}
/* el-divider 修改高度效果 */
.el-divider--horizontal{
     margin: 1rem 0;
    //  background: 0 0;
     border-top: 0.1rem solid #f2f3f5;
 }
 .product-tag{
    padding: 0.2rem 0.4rem;
    height: 1.6rem;
    background-color: rgb(232,245,255);
    min-width: 2.5rem;
    max-width: 10rem;
    border-radius: 0.15rem;
    color: rgb(0, 82, 217);
 }
 .goodsName{
    cursor: pointer;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
   height: 46px;
   margin:  auto 0;
   color: #165DFF;
 }
 /*input框 */
 :deep(.custom-input1 .el-input__wrapper) {
    border-radius: 0.3rem 0 0 0.3rem;
}
:deep(.custom-input2 .el-input__wrapper) {
    border-radius: 0 0.3rem 0.3rem 0;
}
:deep(.item-padding-style .el-form-item__label){
    padding-right: 5px;
}
.can-not-show{  
    margin-top: 3rem;
    width: 36.25rem;
    height: 3.13rem;
    line-height: 3.13rem;
    color: rgba(16, 16, 16, 1);
    font-size: 0.8rem;
    text-align: center;
    font-family: AlibabaPuHui-regular;
}
::v-deep .el-table th.sorted-header  {
    color: #3a8ddb !important;
}

.responsive-form {
  width: 100%;
  max-width: 100%;
}
.el-row {
  margin-bottom: 1rem;
}
.el-col {
  display: flex;
  align-items: center;
}
.el-form-item {
  margin-bottom: 0; /* 移除默认的底部间距 */
}
.el-form-item__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.responsive-form .el-form-item {
  flex: 1 1 calc(50% - 1rem); /* 每个 form-item 占据 50% 的宽度，减去 gap */
  min-width: 15rem; /* 最小宽度 */
}
.responsive-form .el-form-item__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.form-input, .form-select, .form-cascader {
  width: 100%;
}
</style>